<template>
    <div class="menu-page">
        <div class="left ">
            <el-input v-model="filterText" placeholder="搜索菜单名称" />
            <el-button @click="addLvOne">新增一级菜单</el-button>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
              <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span @click="update(node)">{{ node.label }}</span>
                  <span v-if="node.type === 1">
                    <a @click="append(node)"> Append </a>
                  </span>
                </span>
              </template>
            </el-tree>

            
        </div>
        <div class="right ">
          <menu-detail :node="nodeDetail" :isAdd="isAdd"></menu-detail>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import menuDetail from './menu-detail.vue'
const filterText = ref('')

interface Tree {
  [key: string]: any
}
const handleNodeClick = (data: Tree) => {
  console.log(data)
}

const data: Tree[] = [
  
]
const defaultProps = {
  children: 'children',
  label: 'label',
}
let isAdd = ref(true) 
let nodeDetail = reactive({})
const addLvOne = () => {
  isAdd.value = true
  nodeDetail = {
    level:1,
    parentNode:null
  }
}
const append = (node: { level: number; id: any; }) => {
  isAdd.value = true
  console.log(node)
  nodeDetail = {
    level: node.level + 1,
    parentNode:node.id
  }
}
const update = (node: {}) => {
  isAdd.value = false
  nodeDetail = {...node}
}

</script>
<style scoped lang="scss">
.menu-page {
    width:100%;
    height:100%;
    box-sizing: border-box;
    display:flex;
    .border-black {
        border:1px solid #000;
    }
    .left {
        width:350px;
        padding:10px;
    }
    .right {
        flex:1;
    }
}
</style>